<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				<span>活动签到二维码</span>
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<div>
					成员分类：
					<a-radio-group name="radioGroup" :default-value="1" @change="onChange">
						<a-radio v-for="(item, i) in ActivityMemberTypeList" :key="i" :value="item.Key">{{ item.Value }}</a-radio>
					</a-radio-group>
				</div>
				<div class="imgcon"><img class="codeimg" :src="imgurl" alt="" /></div>

				<div class="imgtext">倒计时结束后刷新，剩余{{ second }}s</div>
			</div>
			<!-- <div class="djs">
				<p :class="[second < 10 && second > 0 ? 'large' : '', second == 0 ? 'zero' : '']">{{ second < 10 ? '0' + second : second }}</p>
			</div> -->
		</div>
	</div>
</template>
<script>
import Cache from '@/utils/cache';
import { GetUserActivitySignQRImage, UserDoGetQRexpireTime, DoGetActivityMemberTypeListCommon } from '@/api/follow';
export default {
	props: {
		codeID: String,
		time: null
	},
	watch: {
		time: {
			handler(text) {
				this.id = this.codeID;
				this.QRexpireTime();
				if (this.codeID) {
					this.id = this.codeID
					this.getOtherList()
					this.getlist(this.codeID);
					this.GetConfirmState(this.codeID);
					this.sendCode();
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			imgurl: '',
			timer: '',
			id: '',
			second: 10,
			seconds: 10,
			timer1: '',
			loading: false,
			ActivityMemberTypeList: [],
			activityMemberType:1
		};
	},
	async created() {
	},
	mounted() {},
	methods: {
		onChange(e){
			this.activityMemberType = e.target.value
			this.getlist()
			this.GetConfirmState();
			this.sendCode();
		},
		sendCode() {
			clearInterval(this.timer1);
			this.second = this.seconds;
			this.loading1(); //启动定时器
			this.timer1 = setInterval(() => {
				//创建定时器
				if (this.second === 0) {
					this.clearTimer(); //关闭定时器
					// this.skipStep();
				} else {
					this.loading1();
				}
			}, 1000);
		},
		loading1() {
			//启动定时器
			this.second--; //定时器减1
		},
		clearTimer() {
			//清除定时器
			clearInterval(this.timer1);
			// this.timer1 = null;
		},
		async getOtherList(){
			let res = await DoGetActivityMemberTypeListCommon();
			this.ActivityMemberTypeList = res.data.data;
		},
		async getlist() {
			this.seconds = this.seconds;
			let seconds = this.seconds * 1000;
			let that = this;
			that.timer = setInterval(function() {
				that.GetConfirmState();
				that.sendCode();
				that.second == that.seconds;
			}, seconds);
		},
		async GetConfirmState() {
			let data = {};
			data.id = this.id;
			data.headTicket = Cache.get('token');
			data.activityMemberType = this.activityMemberType
			let res = await GetUserActivitySignQRImage(data);
			this.imgurl = 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
		},
		async QRexpireTime() {
			let data = {};
			this.loading = true;
			let res = await UserDoGetQRexpireTime(data);
			if (res.data.code == 0) {
				this.second = res.data.QRexpireTime;
				this.seconds = res.data.QRexpireTime;
				this.loading = false;
			}
		},
		closeFunction() {
			// this.selecttype = 0
			this.worklist = [];
			this.$emit('closeFun');
			clearInterval(this.timer);
			clearInterval(this.timer1);
		}
	},
	beforeDestroy() {
		clearInterval(this.timer);
		clearInterval(this.timer1);
	}
};
</script>

<style lang="less" scoped>
.imgcon {
	width: 150px;
	height: 150px;
	margin: 20px auto;
}
.imgtext {
	text-align: center;
}
.codeimg {
	width: 150px;
	height: 150px;
}
.djs {
	width: 100%;
	height: 50px;
	text-align: center;
}

.djs p {
	font-size: 16px;
	transition: all 1s ease;
	display: inline;
}

.djs p.large {
	animation: changeSize 1s infinite;
	-webkit-animation: changeSize 1s infinite;
	/* Safari 与 Chrome */
}

.djs p.zero {
	font-size: 22px;
}

@keyframes changeSize {
	0% {
		font-size: 16px;
	}

	50% {
		font-size: 22px;
	}

	100% {
		font-size: 16px;
	}
}

@-webkit-keyframes changeSize {
	0% {
		font-size: 16px;
	}

	50% {
		font-size: 22px;
	}

	100% {
		font-size: 16px;
	}
}
</style>
